import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import { Menu, Icon, Switch, Button,Dropdown,Popover,Popconfirm, Row, Col,Pagination  } from 'antd';
const { SubMenu } = Menu;
const MenuItemGroup = Menu.ItemGroup;


import './Leaderboard.css';

export default class Asia extends React.Component {

  changeMode = (value) => {
    this.setState({
      mode: value ? 'vertical' : 'inline',
    });
  }
  changeTheme = (value) => {
    this.setState({
      theme: value ? 'dark' : 'light',
    });
  }

 confirm() {
  message.info('Click on Yes.');
}

    constructor(props){
        super(props);
        this.state = {
            lists:[]
        }
    }

  render() {
    const content = (
      <div>
        <p style={{display: "block",
      height: "36px",
      lineHeight: "36px",
      paddingLeft: "40px",
      paddingRight: "15px",
      marginBottom: "1px",
      position: "relative",
      overflow: "hidden",
      whiteSpace: "nowrap",
      textOverflow: "ellipsis",
          color:" #333"}}
    ><a href="">播放队列</a></p>
    <p style={{display: "block",
      height: "36px",
      lineHeight: "36px",
      paddingLeft: "40px",
      paddingRight: "15px",
      marginBottom: "1px",
      position: "relative",
      overflow: "hidden",
      whiteSpace: "nowrap",
      textOverflow: "ellipsis",
        color:" #333"}}
    ><a href="">登录后添加到歌单</a></p>
      </div>
    )

    const text = '下载歌曲需要在QQ音乐客户端操作 ! 若没有QQ音乐客户端请先安装'

    const ListView = this.state.lists.map((list,index)=>{
        return  <Row className="toplist_sing">
                            <Col span={1} className="toplist_text toplist_item">{list.rank}</Col>
                            <Col span={1} className="toplist_text toplist_cel">
                                <Icon type="arrow-up" style={{}} />
                                <span>211%</span>
                            </Col>
                            <Col span={2} className="toplist_text toplist_img">
                                <img src={list.pic_big} alt=""/>
                            </Col>
                            <Col span={5} className="toplist_text toplist_title">
                               <p className="text_title" >{list.title}</p>
                                <div className="text_ipt">独家</div>
                                <div  className="text_ipt">MV</div>

                            </Col>
                            <Col span={6} className="toplist_text toplist_icon">
                                <a href="#" className="icon_cart" style={{marginLeft:"50px"}}><Icon type="caret-right" style={{width:"30px",height:"30px" }} /></a>
                                <a href="#" className="icon_cart"><Icon type="plus" style={{ }} /></a>
                                <a href="#" className="icon_cart"><Icon type="download" style={{ }} /></a>
                                <a href="#" className="icon_cart"><Icon type="retweet" style={{ }} /></a>
                            </Col>
                            <Col span={4} className="toplist_text  toplist_name">{list.author}</Col>
                            <Col span={5} className="toplist_text toplist_name"  >
                                <span style={{marginRight:"20px",color:"#999"}}>04:54</span>
                            </Col>
                        </Row>
    }) 
     return (
          <div>
             <div className="mod_toplist">
                      <div className="toplist_head">
                        <h1>巅峰榜·内地</h1>
                        <span className="toplist_time">( 6.22 - 6.28 )  </span>
                        <a href="#" className="toplist_rules">榜单规则</a>
                    </div>

                    <div className="toplist_btn">
                        <Button type="primary" className="toplist_bot"><Icon type="caret-right" style={{ width:"13px",height:"16px" }} />播放</Button>
                        <Popover content={content}>
                            <Button className="toplist_bot"><Icon type="plus" style={{ width:"13px",height:"16px" }} />添加到</Button>
                        </Popover>
                        <Popconfirm placement="bottom" title={text} onConfirm={confirm} okText="打开客户端" cancelText="下载客户端">
                            <Button className="toplist_bot"><Icon type="download" style={{ width:"13px",height:"16px" }} />下载</Button>
                        </Popconfirm>
                        
                        <Button className="toplist_bot"><Icon type="exception" style={{ width:"13px",height:"16px" }} />批量操作</Button>
                    </div>

                        <Row className="toplist_list">
                            <Col className="toplist_col1" xs={5} sm={7} md={9} lg={11} xl={10}>歌曲</Col>
                            <Col className="toplist_col2" xs={2} sm={4} md={5} lg={7} xl={8}>歌手</Col>
                            <Col className="toplist_col3" xs={1} sm={3} md={4} lg={6} xl={7}>时长</Col>
                        </Row>


                     <div>
                       {ListView}
                    </div>
                </div>                    
          </div>
    )
  }

  componentDidMount(){
    var that = this;
    $.ajax({
            type:"GET",
            url:'http://tingapi.ting.baidu.com/v1/restserver/ting?format=json&calback=&from=webapp_music&method=baidu.ting.billboard.billList&type=24&size=20&offset=0',
            dataType:"jsonp",
            success:function(data){
                var arr=data.song_list;
                that.setState({
                    lists:arr
                })
            }

    })
}
}

